<template>
  <div class="content_wrap">
    <div class="content_left">
      <div class="music_top flex">
        <div class="dj_img">
          <div class="mkb">
            <img v-if="songs.al" :src="songs.al.picUrl" alt="" />
            <span class="msk f-alpha"></span>
          </div>
        </div>
        <div class="dj_info clearfix">
          <div class="dj_info_title flex">
            <i class="dj_info_title_logo"></i>
            <div class="songNameH">
              <span class="f-ff2">{{ songs.name }}</span>
              <a title="播放mv" v-if="songs.mv" href="#"
                ><i class="icn u-icn u-icn-2"></i
              ></a>
            </div>
          </div>
          <div class="sopng_ifn">
            <p class="des s-fc4">
              歌手：<span v-for="item in songs.ar" :key="item.id"
                ><a class="s-fc7" href="#">{{ item.name }}</a
                ><span
                  v-if="
                    songs.ar.length > 1 &&
                    songs.ar[songs.ar.length - 1].id !== item.id
                  "
                  >/</span
                ></span
              >
            </p>
            <p class="des s-fc4" v-if="songs.al">
              所属专辑：<a href="#" class="s-fc7">{{ songs.al.name }}</a>
            </p>
          </div>
          <div class="action_buttons clearfix">
            <a href="#" class="play_btn" @click="getSong(songs.id)">
              <span class="btn2">
                <em class="play_img btn2"></em>
                播放</span
              >
            </a>
            <a href="#" class="addto_btn btn2"></a>
            <a href="#" class="collection btn2">
              <span class="btn2">收藏</span>
            </a>
            <a href="#" class="share btn2">
              <span class="btn2">分享</span>
            </a>
            <a href="#" class="down_btn btn2">
              <span class="btn2">下载</span>
            </a>
            <a href="#" class="pl_btn btn2">
              <span class="btn2">({{ comments.total }})</span>
            </a>
          </div>
          <div class="lyric_desc" :class="{ zk: zk }">
            <span v-for="(item, index) in lyric" :key="index"
              >{{ item }}<br
            /></span>
          </div>
          <div class="showDiv">
            <a href="javascript:;" v-if="zk" class="showMore" @click="zk = !zk">
              <span class="spanMAL">展开</span>
              <i class="jiantou jiantou_h"></i>
            </a>
            <a
              href="javascript:;"
              v-if="!zk"
              class="showMore"
              @click="zk = !zk"
            >
              <span class="spanMAL">收起</span>
              <i class="jiantou jiantou_s"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="n-songtb">
        <div class="comments_wrap">
          <div class="comments">
            <div class="c_title">
              <h3>评论</h3>
              <span class="songNum">共{{ comments.total }}条评论</span>
            </div>
            <div class="comments_contents">
              <div class="user_comments">
                <div class="headI">
                  <img
                    src="https://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=50y50"
                    alt=""
                  />
                </div>
                <div class="comment_area">
                  <textarea name="" id="status" placeholder="评论"></textarea>
                  <div class="corr u-arr">
                    <em class="arrline">◆</em><span class="arrclr">◆</span>
                  </div>
                  <div class="user_comments_bottom flex">
                    <a href="javascript:;" class="pull-right">评论</a>
                    <span class="pull-right" id="counter">140</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 精彩评论 -->
            <Comment title="精彩评论" :data="comments.hotComments"></Comment>
            <!-- 最新评论 -->
            <Comment
              title="最新评论"
              :data="comments.comments"
              :commentCount="comments.total"
            ></Comment>
          </div>
        </div>
      </div>
    </div>
    <div class="content_right">
      <div class="content_box">
        <div class="hitSong">
          <h3>包含这首歌的歌单</h3>
          <ul class="m-rctlist clearfix">
            <li>
              <div class="cver u-cover u-cover-3">
                <a
                  href="/playlist?id=6827562995"
                  title="韩综 | 换乘恋爱 BGM"
                  data-res-id="6827562995"
                  data-res-type="13"
                  data-res-action="log"
                  data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"
                  ><img
                    src="http://p2.music.126.net/YcUi9CkF91Cu-FrZ2EnHAQ==/109951166122947271.jpg?param=50y50"
                  />
                </a>
              </div>
              <div class="info">
                <p class="f-thide">
                  <a
                    class="sname f-fs1 s-fc0"
                    href="/playlist?id=6827562995"
                    title="韩综 | 换乘恋爱 BGM"
                    data-res-id="6827562995"
                    data-res-type="13"
                    data-res-action="log"
                    data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"
                    >韩综 | 换乘恋爱 BGM</a
                  >
                </p>
                <p>
                  <span class="by s-fc4">by</span
                  ><a
                    class="nm nm f-thide s-fc3"
                    href="/user/home?id=111050645"
                    title="咕噜咕噜v-"
                    >咕噜咕噜v-</a
                  >
                </p>
              </div>
            </li>
            <li>
              <div class="cver u-cover u-cover-3">
                <a
                  href="/playlist?id=6827562995"
                  title="韩综 | 换乘恋爱 BGM"
                  data-res-id="6827562995"
                  data-res-type="13"
                  data-res-action="log"
                  data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"
                  ><img
                    src="http://p2.music.126.net/YcUi9CkF91Cu-FrZ2EnHAQ==/109951166122947271.jpg?param=50y50"
                  />
                </a>
              </div>
              <div class="info">
                <p class="f-thide">
                  <a
                    class="sname f-fs1 s-fc0"
                    href="/playlist?id=6827562995"
                    title="韩综 | 换乘恋爱 BGM"
                    data-res-id="6827562995"
                    data-res-type="13"
                    data-res-action="log"
                    data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"
                    >韩综 | 换乘恋爱 BGM</a
                  >
                </p>
                <p>
                  <span class="by s-fc4">by</span
                  ><a
                    class="nm nm f-thide s-fc3"
                    href="/user/home?id=111050645"
                    title="咕噜咕噜v-"
                    >咕噜咕噜v-</a
                  >
                </p>
              </div>
            </li>
            <li>
              <div class="cver u-cover u-cover-3">
                <a
                  href="/playlist?id=6827562995"
                  title="韩综 | 换乘恋爱 BGM"
                  data-res-id="6827562995"
                  data-res-type="13"
                  data-res-action="log"
                  data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"
                  ><img
                    src="http://p2.music.126.net/YcUi9CkF91Cu-FrZ2EnHAQ==/109951166122947271.jpg?param=50y50"
                  />
                </a>
              </div>
              <div class="info">
                <p class="f-thide">
                  <a
                    class="sname f-fs1 s-fc0"
                    href="/playlist?id=6827562995"
                    title="韩综 | 换乘恋爱 BGM"
                    data-res-id="6827562995"
                    data-res-type="13"
                    data-res-action="log"
                    data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"
                    >韩综 | 换乘恋爱 BGM</a
                  >
                </p>
                <p>
                  <span class="by s-fc4">by</span
                  ><a
                    class="nm nm f-thide s-fc3"
                    href="/user/home?id=111050645"
                    title="咕噜咕噜v-"
                    >咕噜咕噜v-</a
                  >
                </p>
              </div>
            </li>
          </ul>
        </div>
        <div class="likeSongPerson">
          <h3>相似歌曲</h3>
          <ul class="m-sglist">
            <li class="clearfix">
              <div class="txt">
                <div class="f-thide">
                  <a
                    href="/song?id=308353"
                    title="钟无艳"
                    class="s-fc1"
                    data-res-id="308353"
                    data-res-type="18"
                    data-res-action="log"
                    data-res-data="recommendclick|0||song-song-recommend|118261"
                    >钟无艳</a
                  >
                </div>
                <div class="f-thide s-fc4">
                  <span title="谢安琪"
                    ><a class="s-fc4" href="/artist?id=9952">谢安琪</a></span
                  >
                </div>
              </div>
              <div class="opr clearfix">
                <a
                  data-res-action="play"
                  data-res-id="308353"
                  data-res-type="18"
                  class="play"
                  href="javascript:;"
                ></a>
                <a
                  data-res-action="addto"
                  data-res-id="308353"
                  data-res-type="18"
                  class="add"
                  href="javascript:;"
                ></a>
              </div>
            </li>
            <li class="clearfix">
              <div class="txt">
                <div class="f-thide">
                  <a
                    href="/song?id=308353"
                    title="钟无艳"
                    class="s-fc1"
                    data-res-id="308353"
                    data-res-type="18"
                    data-res-action="log"
                    data-res-data="recommendclick|0||song-song-recommend|118261"
                    >钟无艳</a
                  >
                </div>
                <div class="f-thide s-fc4">
                  <span title="谢安琪"
                    ><a class="s-fc4" href="/artist?id=9952">谢安琪</a></span
                  >
                </div>
              </div>
              <div class="opr clearfix">
                <a
                  data-res-action="play"
                  data-res-id="308353"
                  data-res-type="18"
                  class="play"
                  href="javascript:;"
                ></a>
                <a
                  data-res-action="addto"
                  data-res-id="308353"
                  data-res-type="18"
                  class="add"
                  href="javascript:;"
                ></a>
              </div>
            </li>
            <li class="clearfix">
              <div class="txt">
                <div class="f-thide">
                  <a
                    href="/song?id=308353"
                    title="钟无艳"
                    class="s-fc1"
                    data-res-id="308353"
                    data-res-type="18"
                    data-res-action="log"
                    data-res-data="recommendclick|0||song-song-recommend|118261"
                    >钟无艳</a
                  >
                </div>
                <div class="f-thide s-fc4">
                  <span title="谢安琪"
                    ><a class="s-fc4" href="/artist?id=9952">谢安琪</a></span
                  >
                </div>
              </div>
              <div class="opr clearfix">
                <a
                  data-res-action="play"
                  data-res-id="308353"
                  data-res-type="18"
                  class="play"
                  href="javascript:;"
                ></a>
                <a
                  data-res-action="addto"
                  data-res-id="308353"
                  data-res-type="18"
                  class="add"
                  href="javascript:;"
                ></a>
              </div>
            </li>
            <li class="clearfix">
              <div class="txt">
                <div class="f-thide">
                  <a
                    href="/song?id=308353"
                    title="钟无艳"
                    class="s-fc1"
                    data-res-id="308353"
                    data-res-type="18"
                    data-res-action="log"
                    data-res-data="recommendclick|0||song-song-recommend|118261"
                    >钟无艳</a
                  >
                </div>
                <div class="f-thide s-fc4">
                  <span title="谢安琪"
                    ><a class="s-fc4" href="/artist?id=9952">谢安琪</a></span
                  >
                </div>
              </div>
              <div class="opr clearfix">
                <a
                  data-res-action="play"
                  data-res-id="308353"
                  data-res-type="18"
                  class="play"
                  href="javascript:;"
                ></a>
                <a
                  data-res-action="addto"
                  data-res-id="308353"
                  data-res-type="18"
                  class="add"
                  href="javascript:;"
                ></a>
              </div>
            </li>
            <li class="clearfix">
              <div class="txt">
                <div class="f-thide">
                  <a
                    href="/song?id=308353"
                    title="钟无艳"
                    class="s-fc1"
                    data-res-id="308353"
                    data-res-type="18"
                    data-res-action="log"
                    data-res-data="recommendclick|0||song-song-recommend|118261"
                    >钟无艳</a
                  >
                </div>
                <div class="f-thide s-fc4">
                  <span title="谢安琪"
                    ><a class="s-fc4" href="/artist?id=9952">谢安琪</a></span
                  >
                </div>
              </div>
              <div class="opr clearfix">
                <a
                  data-res-action="play"
                  data-res-id="308353"
                  data-res-type="18"
                  class="play"
                  href="javascript:;"
                ></a>
                <a
                  data-res-action="addto"
                  data-res-id="308353"
                  data-res-type="18"
                  class="add"
                  href="javascript:;"
                ></a>
              </div>
            </li>
          </ul>
        </div>
        <div class="m-multi">
          <h3 class="u-hd3">
            <span class="f-fl">网易云音乐多端下载</span>
          </h3>
          <ul class="bg clearfix">
            <li>
              <a
                data-res-action="bilog"
                data-log-action="downloadapp"
                data-log-json='{"type":"iPhone","source":"detail"}'
                href="https://itunes.apple.com/cn/app/id590338362"
                class="ios"
                hidefocus="true"
                target="_blank"
                >iPhone</a
              >
            </li>
            <li>
              <a
                data-res-action="bilog"
                data-log-action="downloadapp"
                data-log-json='{"type":"pc","source":"detail"}'
                href="https://music.163.com/api/pc/download/latest"
                class="pc"
                hidefocus="true"
                target="_blank"
                >PC</a
              >
            </li>
            <li>
              <a
                data-res-action="bilog"
                data-log-action="downloadapp"
                data-log-json='{"type":"android","source":"detail"}'
                href="https://music.163.com/api/android/download/latest2"
                class="aos"
                hidefocus="true"
                target="_blank"
                >Android</a
              >
            </li>
          </ul>
          <p class="s-fc4">同步歌单，随时畅听320k好音乐</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Comment from "@/components/common/Comment.vue";
import {
  getSongDetailApi,
  getMusicCommentApi,
  getLyricApi,
  getSongApi,
} from "@/http/api.js";
export default {
  data() {
    return {
      // 存放歌曲详情
      songs: {},
      //   存放评论
      comments: {},
      //   存放歌词
      lyric: [],
      // 不展开
      zk: true,
    };
  },
  components: {
    Comment,
  },
  methods: {
    async getSongDetail() {
      const res = await getSongDetailApi(this.$route.query.id);
      console.log(res);
      this.songs = res.songs[0];
    },
    async getMusicComment() {
      const comments = await getMusicCommentApi(this.$route.query.id);
      this.comments = comments;
    },
    async getLyric() {
      const res = await getLyricApi(this.$route.query.id);
      let lyricArr = res.lrc.lyric.split("\n");
      lyricArr.forEach((e) => {
        let rindex = e.indexOf("]");
        e = e.substring(rindex + 1);
        this.lyric.push(e);
      });
    },
    async getSong(id) {
      const res = await getSongApi(id);
      const res1 = await getSongDetailApi(id);
      res.data.unshift(res1.songs[0]);
      console.log(res);
      this.$store.commit("setSongList", res);
    },
  },
  created() {
    this.getSongDetail();
    this.getMusicComment();
    this.getLyric();
  },
};
</script>
 
<style lang="less" scoped>
.content_wrap {
  display: flex;
  width: 980px;
  margin: 0 auto;
  background: url(../../assets/images/wrap1.png) repeat-y;
  border: 1px solid #d3d3d3;
  border-bottom: 0;
  border-top: 0;
}

.content_left {
  width: 729px;
  padding: 47px 30px 40px 39px;
  height: inherit;
}

.content_right {
  height: inherit;
  width: 255px;
}

.mkb {
  position: relative;
  width: 198px;
  height: 198px;
  float: left;
  box-sizing: content-box;
}

.msk {
  position: absolute;
  background: url(../../assets/images/coverall.png) no-repeat;
  width: 206px;
  height: 205px;
  top: -4px;
  left: -4px;
  background-position: -140px -580px;
}

.dj_img img {
  width: 130px;
  height: 130px;
  margin: 34px;
}

.dj_info {
  float: right;
  width: 426px;
}

.dj_info_title {
  margin: 0 0 12px;
}

.dj_info_title_logo {
  position: relative;
  background: url(../../assets/images/icon.png) no-repeat;
  display: inline-block;
  width: 54px;
  height: 24px;
  background-position: 0 -463px;
  overflow: hidden;
  float: left;
}

.songNameH {
  margin: 0 10px;
  position: relative;
  font-size: 24px;
}

.songNameH a {
  display: inline-block;
  padding-left: 10px;
}

.songNameH a > i {
  display: inline-block;
  background: url(../../assets/images/icon.png) no-repeat;
  width: 21px;
  height: 18px;
  background-position: 0 -18px;
}

.dj_info_title h2 {
  margin: 0;
  font-size: 20px;
  margin-left: 64px;
  font-weight: 400;
  line-height: 24px;
}

.song_ifn {
  margin: 0 0 20px;
  line-height: 35px;
}

p.des {
  margin: 20px 0;
  color: #999;
  text-align-last: left;
}

.lyric_desc {
  font-size: 12px;
  margin-top: 13px;
  line-height: 23px;

  overflow: hidden;
  &.zk {
    height: 300px;
  }
}

.action_buttons a {
  display: inline-block;
  float: left;
  line-height: 31px;
  font-size: 12px;
  color: #000;
}

.action_buttons .play_btn {
  width: 66px;
  height: 31px;
  text-align: center;
}

.btn2 {
  background: url(../../assets/images/button2.png) no-repeat;
  font-family: simsun, \5b8b\4f53;
}

.action_buttons .play_btn span {
  display: block;
  color: #fff;
  background-position: 0 -387px;
  padding: 0 7px 0 8px;
}

.action_buttons .play_btn:hover span {
  background-position: 0 -469px;
}

.play_img {
  float: left;
  width: 20px;
  height: 18px;
  margin: 6px 2px 2px 0;
  background-position: 0 -1622px;
  overflow: hidden;
}

.action_buttons .play_btn:hover .play_img {
  background-position: -28px -1622px;
}

.addto_btn {
  float: left;
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  cursor: pointer;
  padding: 0 5px 0 0;
  white-space: nowrap;
  width: 31px;
  margin-left: -3px;
  padding-right: 0;
  background-position: 0 -1588px;
  margin-right: 5px;
}

.addto_btn:hover {
  background-position: -40px -1588px;
}

.collection {
  float: left;
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  padding: 0 5px 0 0;
  background-position: right -1020px;
  margin-right: 6px;
}

.collection span {
  display: inline-block;
  padding-right: 2px;
  padding-left: 28px;
  background-position: 0 -977px;
}

.collection:hover {
  background-position: right -1106px;
}

.collection:hover span {
  background-position: 0 -1063px;
}

.share {
  float: left;
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  padding: 0 5px 0 0;
  background-position: right -1020px;
  margin-right: 6px;
}

.share span {
  display: inline-block;
  background-position: 0 -1225px;
  padding: 0px 0px 0 28px;
}

.share:hover {
  background-position: right -1106px;
}

.share:hover span {
  background-position: 0 -1268px;
}

.down_btn {
  float: left;
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  padding: 0 5px 0 0;
  background-position: right -1020px;
  margin-right: 6px;
}

.down_btn span {
  display: inline-block;
  background-position: 0 -2761px;
  padding-right: 2px;
  padding-left: 28px;
  padding: 0 7px 0 36px;
}

.down_btn:hover {
  background-position: right -1106px;
}

.down_btn:hover span {
  background-position: 0 -2805px;
}

.pl_btn {
  float: left;
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  padding: 0 5px 0 0;
  background-position: right -1020px;
  margin-right: 6px;
}

.pl_btn span {
  display: inline-block;
  padding-right: 2px;
  padding-left: 28px;
  background-position: 0 -1465px;
}

.pl_btn:hover {
  background-position: right -1106px;
}

.pl_btn:hover span {
  background-position: 0 -1508px;
}

.comments_wrap {
  margin-top: 40px;
}

.c_title {
  height: 33px;
  border-bottom: 2px solid #c20c0c;
}

.c_title h3 {
  margin: 0;
  font-size: 20px;
  color: #333;
  line-height: 28px;
  float: left;
}

.c_title .songNum {
  float: left;
  margin: 9px 0 0 20px;
}

.comments_contents {
  margin-top: 20px;
}

.user_comments {
  margin-bottom: 20px;
}

.headI {
  float: left;
}

.headI img {
  width: 50px;
  height: 50px;
}

.comment_area {
  /* float: left; */
  position: relative;
  margin-left: 62px;
  height: 98px;
  font-size: 12px;
}

.comment_area textarea {
  resize: none;
  width: 100%;
  margin: 0;
  height: 63px;
  display: block;
  margin-right: -20px;
  padding: 5px 6px 6px;
  border: 1px solid #cdcdcd;
  border-radius: 2px;
  line-height: 19px;
  overflow: auto;
  outline: none;
}

.u-arr {
  width: 13px;
  height: 14px;
  overflow: hidden;
}

.comment_area .corr {
  position: absolute;
  top: 11px;
  left: -7px;
}

.u-arr .arrline,
.u-arr .arrclr,
.u-arr .arriner {
  display: block;
  font-family: "SimSun";
  font-size: 15px;
  font-style: normal;
  font-weight: normal;
  height: 10px;
  line-height: normal;
}

.u-arr .arrline {
  color: #cdcdcd;
}

.u-arr .arrclr {
  margin: -10px 0 0 1px;
  color: #fff;
}

.user_comments_bottom {
  justify-content: end;
  position: relative;
  zoom: 1;
  clear: both;
  padding-top: 10px;
}

.user_comments_bottom span {
  color: #999;
  margin-right: 10px;
  line-height: 25px;
}

.user_comments_bottom a {
  display: inline-block;
  background: url(../../assets/images/button.png) no-repeat;
  width: 46px;
  height: 25px;
  background-position: -84px -64px;
  color: #fff;
  text-align: center;
  line-height: 25px;
}

.user_comments_bottom a:hover {
  text-decoration: none;
}

.good_comments_wrap {
  width: 100%;
  padding-bottom: 20px;
}

.good_comments_wrap,
.new_comments_wrap {
  font-size: 12px;
}

.good_comments_wrap h3,
.new_comments_wrap h3 {
  position: relative;
  top: 1px;
  height: 20px;
  border-bottom: 1px solid #cfcfcf;
  font-size: 12px;
  font-weight: 700;
  margin: 0;
}

.itm {
  padding: 15px 0;
  border-top: 1px dotted #ccc;
}

.head,
.head img {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: -100px;
  vertical-align: middle;
}

.cntwrap {
  margin-left: 60px;
}

.cntwrap .cnt {
  width: 100%;
  overflow: hidden;
  line-height: 20px;
  word-break: break-word;
}

div.rp {
  margin-top: 15px;
  text-align: right;
}

.time {
  float: left;
  margin: 0 !important;
  color: #999;
}

.u-icn2 {
  background: url(../../assets/images/icon2.png);
  display: inline-block;
  overflow: hidden;
  margin-right: 5px;
  vertical-align: -2px;
  margin-top: -4px;
  width: 15px;
  height: 14px;
  background-position: -150px 0;
}

.sep {
  margin: 0 8px;
  color: #ccc;
}

.likeNum {
  color: #333;
}

.s-fc3 {
  color: #333;
}

.s-fc7 {
  color: #0c73c2;
  margin-right: 5px;
}

.cnt .vip_img {
  margin-right: 5px;
  vertical-align: -1px;
  height: 12px;
}

.que {
  position: relative;
  padding: 8px 19px;
  margin-top: 10px;
  line-height: 20px;
  background: #f4f4f4;
  border: 1px solid #dedede;
}

.que .darr {
  display: inline-block;
  position: absolute;
  top: -7px;
  left: 20px;
  font-size: 12px;
  line-height: 14px;
  color: #f4f4f4;
}

.que .darr i {
  font-style: normal;
  text-align: left;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

.que .darr .bd {
  color: #dedede;
}

.f-brk {
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

.content_box {
  padding: 20px 40px 40px 30px;
}

.content_box .likeSongPerson h3,
.content_box .hitSong h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  position: relative;
  height: 23px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  color: #333;
}

ul.m-piclist {
  margin: 0;
  margin-left: -13px;
  padding-bottom: 25px;
  box-sizing: border-box;
  width: 212px;
}

.m-piclist li {
  float: left;
  display: inline;
  width: 40px;
  height: 40px;
  padding: 0 0 13px 13px;
  box-sizing: content-box;
}

.m-piclist li img {
  float: left;
  width: 40px;
  height: 40px;
}

.m-rctlist {
  margin-bottom: 25px;
}

.m-rctlist li {
  float: left;
  width: 200px;
  height: 50px;
  margin-bottom: 15px;
  line-height: 24px;
  font-size: 12px;
}

.u-cover {
  position: relative;
  display: block;
}

.m-rctlist .cver,
.n-rctlist .cver img {
  float: left;
  width: 50px;
  height: 50px;
}

.m-rctlist .cver {
  margin-right: -60px;
}

.m-rctlist .info {
  margin-left: 60px;
  line-height: 24px;
}

.m-rctlist .info p {
  margin: 0;
  width: 140px;
}

.m-rctlist .by {
  float: left;
  color: #999;
}

.m-rctlist .nm {
  float: left;
  max-width: 106px;
  margin: 0 2px 0 4px;
  color: #666;
}

.sname {
  color: #000;
  font-size: 14px;
}

.m-multi {
  margin: 20px 0;
  padding-bottom: 20px;
}

.u-hd3 {
  margin: 0;
  position: relative;
  height: 23px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  color: #333;
  font-size: 12px;
  font-weight: 700;
}

.m-multi .bg {
  background: url(../../assets/images/sprite.png) no-repeat 0 9999px;
  height: 65px;
  margin-bottom: 10px;
  background-position: 0 -392px;
  width: 200px;
}

.m-multi .bg li {
  float: left;
}

.m-multi .bg a {
  display: block;
  width: 42px;
  height: 48px;
  text-indent: -9999px;
}

.m-multi .bg .pc {
  width: 60px;
  margin: 0 26px 0 30px;
}

.m-multi .bg .ios:hover {
  background: url(../../assets/images/sprite.png) no-repeat 0 9999px;
  background-position: 0 -472px;
}

.m-multi .bg .pc:hover {
  background: url(../../assets/images/sprite.png) no-repeat 0 9999px;
  background-position: -72px -472px;
}

.m-multi .bg .aos:hover {
  background: url(../../assets/images/sprite.png) no-repeat 0 9999px;
  background-position: -158px -472px;
}

p.s-fc4 {
  color: #999;
  font-size: 12px;
  text-align: center;
}

.paging-wrap {
  font-size: 12px;
}

.m-sglist {
  margin-bottom: 25px;
  font-size: 12px;
}

.m-sglist a {
  color: #333;
}

.m-sglist .s-fc4 {
  color: #999;
}

.m-sglist li {
  margin-top: 10px;
}

.m-sglist .txt {
  border: 0;
  float: left;
  width: 149px;
  line-height: 16px;
}

.m-sglist .opr {
  float: right;
  position: relative;
  top: 10px;
  line-height: 32px;
}

.m-sglist .opr a {
  /* display: block; */
  float: left;
  width: 10px;
  height: 11px;
  background: url(../../assets/images/icon2.png) no-repeat -9999px -9999px;
  opacity: 0.9;
}

.m-sglist .opr .play {
  margin-right: 16px;
  background-position: -69px -455px;
}

.m-sglist .opr .add {
  background-position: -87px -454px;
}

.NumS::before {
  content: "/ ";
}

.showDiv a {
  color: #0c73c2;
  font-size: 12px;
}

.jiantou {
  display: inline-block;
  background: url("../../assets/images/icon.png") no-repeat;
  width: 11px;
  height: 8px;
}

.jiantou_h {
  background-position: -65px -520px;
}

.jiantou_s {
  background-position: -45px -520px;
}

.music_top {
  justify-content: space-between;
}
</style>